// 分页

import { PAGE_LIMIT } from "../../constant"
import {memo} from 'react';
    
    // 有文章： 【非空】
    // 文章数据 / 【条数<=limit 不做分页】
    // 文章数据 / 【条数>limit 做分页】

const Pagination =  props =>{
    // 数据总数 count
    const {count,currentPage,onPageClick} = props

    //  count<= PAGE_LIMIT =>不需要做分页
    if(count<=PAGE_LIMIT){
        return null
    }

    // count > PAGE_LIMIT =>需要做分页  

    //页数
    const pageNum = []
    for (let page = 1; page <=Math.ceil(count/PAGE_LIMIT); page++) {
        pageNum.push(page)
    }

    // console.log(pageNum) [1,2,3,4]



    //构建分页组件内容
    return (
        <nav>
            <ul>
                {
                    pageNum.map(pageNum=>{

                        const isCurrentPage = currentPage ===pageNum

                        return (
                            <li key={pageNum} className={isCurrentPage?"page-item active":"page-item"}
                                >
                                <button
                                    type="button"
                                    className="page-link"
                                    onClick={
                                        ()=>{
                                            onPageClick(pageNum)
                                        }
                                    }
                                >

                                {pageNum}
                                </button>
                            </li>
                        )
                    })
                }
            </ul>
        </nav>
    )
}

export default memo(Pagination)